<div class="content">
    <div id="example_title">
        <h1>Multi-Select Drop Down Lists</h1>
        Multi select drop downs extend HTML's input conrol with a drop down menu where you can select multiple items one item
        at a time. Full keyboard support is implemented.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div style="height: 20px"></div>
<div class="w2ui-field">
    <label>Multi-Select:</label>
    <div> <input id="enum"> </div>
</div>
<div style="height: 10px"></div>
<div class="w2ui-field">
    <label>Max 2 Items:</label>
    <div> <input id="enum-max"> </div>
</div>
<div style="height: 10px"></div>
<div class="w2ui-field">
    <label>Custom:</label>
    <div> <input id="enum-custom"> </div>
</div>
<div style="height: 20px"></div>

<style>
.w2ui-field input {
    width: 400px;
}
.w2ui-field > div > span {
    margin-left: 20px;
}
</style>

<!--CODE-->
<script type="module">
import { w2field, w2utils, query } from '__W2UI_PATH__'

let people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison',
    'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes',
    'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland',
    'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley',
    'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson',
    'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan',
    'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush',
    'Barack Obama', 'Donald Trump', 'Joe Biden'];

new w2field('enum', {
    el: query('#enum')[0],
    items: people,
    selected: ['James Buchanan', 'James Madison',]
})

new w2field('enum', {
    el: query('#enum-max')[0],
    items: people,
    max: 2
})

// add some random icons
people = w2utils.normMenu(people)
people.forEach(p => p.icon = 'w2ui-empty')
people[0].icon = 'w2ui-icon-info'
people[1].icon = 'w2ui-icon-search'
people[2].icon = 'w2ui-icon-paste'
new w2field('enum', {
    el: query('#enum-custom')[0],
    items: people,
    onAdd(event) {
        if (Math.random() > 0.5) {
            event.detail.item.style = 'background-color: rgb(255, 232, 232); border: 1px solid red;';
        }
    },
    renderItem(item, index, remove) {
        var html = remove + '<span class="w2ui-icon w2ui-icon-info"></span>' + item.text;
        return html;
    },
    renderDrop(item, options) {
        let ind = options.items.findIndex(i => i.id == item.id)
        return `${ind+1}. ${item.text}`;
    }
})
</script>